<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>APISIX 管理控制台</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/main.css">
    <!-- 图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">
    
    <!-- 引入Vue和其他依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.3/dist/vue-router.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.24.0/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <el-container class="main-container">
            <!-- 侧边栏 -->
            <el-aside width="220px" class="aside">
                <div class="logo">
                    <img src="img/favicon.png" alt="APISIX Logo">
                    <span>APISIX 控制台</span>
                </div>
                <el-menu
                    :default-active="activeMenu"
                    class="el-menu-vertical"
                    background-color="#001529"
                    text-color="#fff"
                    active-text-color="#1890ff"
                    router>
                    <el-menu-item index="/">
                        <i class="fas fa-tachometer-alt"></i>
                        <span slot="title">仪表盘</span>
                    </el-menu-item>
                    <el-submenu index="routes">
                        <template slot="title">
                            <i class="fas fa-sitemap"></i>
                            <span>路由管理</span>
                        </template>
                        <el-menu-item index="/routes/list">
                            <span>路由列表</span>
                        </el-menu-item>
                        <el-menu-item index="/routes/create">
                            <span>创建路由</span>
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="consumers">
                        <template slot="title">
                            <i class="fas fa-users"></i>
                            <span>消费者管理</span>
                        </template>
                        <el-menu-item index="/consumers/list">
                            <span>消费者列表</span>
                        </el-menu-item>
                        <el-menu-item index="/consumers/create">
                            <span>创建消费者</span>
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="upstreams">
                        <template slot="title">
                            <i class="fas fa-server"></i>
                            <span>上游管理</span>
                        </template>
                        <el-menu-item index="/upstreams/list">
                            <span>上游列表</span>
                        </el-menu-item>
                        <el-menu-item index="/upstreams/create">
                            <span>创建上游</span>
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="services">
                        <template slot="title">
                            <i class="fas fa-cogs"></i>
                            <span>服务管理</span>
                        </template>
                        <el-menu-item index="/services/list">
                            <span>服务列表</span>
                        </el-menu-item>
                        <el-menu-item index="/services/create">
                            <span>创建服务</span>
                        </el-menu-item>
                    </el-submenu>
                    <el-menu-item index="/token">
                        <i class="fas fa-key"></i>
                        <span slot="title">获取令牌</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            
            <!-- 主要内容区域 -->
            <el-container>
                <el-header height="64px" class="header">
                    <div class="header-left">
                        <i class="fas fa-bars toggle-sidebar" @click="toggleSidebar"></i>
                    </div>
                    <div class="header-right">
                        <el-dropdown trigger="click">
                            <span class="user-profile">
                                <i class="fas fa-user-circle"></i>
                                <span>管理员</span>
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>
                                    <i class="fas fa-cog"></i> 设置
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <i class="fas fa-sign-out-alt"></i> 退出
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-header>
                
                <el-main>
                    <!-- 路由视图 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <!-- 引入组件 -->
    <script src="js/components/dashboard.js"></script>
    <script src="js/components/consumers/list.js"></script>
    <script src="js/components/consumers/create.js"></script>
    <script src="js/components/routes/list.js"></script>
    <script src="js/components/routes/create.js"></script>
    <script src="js/components/upstreams/list.js"></script>
    <script src="js/components/upstreams/create.js"></script>
    <script src="js/components/services/list.js"></script>
    <script src="js/components/services/create.js"></script>
    <script src="js/components/token.js"></script>
    
    <!-- 主应用脚本 -->
    <script src="js/app.js"></script>
</body>
</html> 